document.addEventListener('DOMContentLoaded', function() {
	// 获取所有标签和内容元素
	const tabs = document.querySelectorAll('.tab');
	const tabContents = document.querySelectorAll('.tab-content');

	// 为每个标签添加点击事件
	tabs.forEach(tab => {
		tab.addEventListener('click', function() {
			// 获取目标内容ID
			const targetId = this.getAttribute('data-tab');
			const targetContent = document.getElementById(targetId);

			// 如果点击的是当前活动标签，则不执行任何操作
			if (this.classList.contains('active')) {
				return;
			}

			// 移除所有标签的活动状态
			tabs.forEach(t => t.classList.remove('active'));

			// 添加当前标签的活动状态
			this.classList.add('active');

			// 处理内容区域的切换动画
			tabContents.forEach(content => {
				if (content.id === targetId) {
					// 如果是目标内容，先添加prev类，然后移除并添加active
					content.classList.add('prev');

					// 强制重绘以确保过渡效果生效
					void content.offsetWidth;

					// 移除prev类，添加active类
					content.classList.remove('prev');
					content.classList.add('active');
				} else if (content.classList.contains('active')) {
					// 如果是当前活动内容，移除active类
					content.classList.remove('active');
				}
			});
		});
	});

	// 添加键盘导航支持
	document.addEventListener('keydown', function(e) {
		// 如果按下了左箭头或右箭头键
		if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
			e.preventDefault();

			// 找到当前活动标签
			const activeTab = document.querySelector('.tab.active');
			let nextTab;

			if (e.key === 'ArrowLeft') {
				// 左箭头：获取前一个标签，如果是第一个则循环到最后
				nextTab = activeTab.previousElementSibling || document.querySelector('.tab:last-child');
			} else {
				// 右箭头：获取下一个标签，如果是最后一个则循环到第一个
				nextTab = activeTab.nextElementSibling || document.querySelector('.tab:first-child');
			}

			// 触发点击事件
			nextTab.click();

			// 确保标签在视图中可见
			nextTab.scrollIntoView({
				behavior: 'smooth',
				inline: 'center',
				block: 'nearest'
			});
		}
	});

	fetch('https://v1.hitokoto.cn')
		.then(response => response.json())
		.then(response => {
			document.getElementById('quote').innerText = response.hitokoto;
		})
		.catch(console.error)
});